<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    const vueApp = Vue.createApp({
        data() {
            return {
               msg: '生命周期钩子函数'
            }
        },
        /*   组件的生命周期函数：在一个组件的生命周期范围内 某一时刻会自动执行 的函数 */

        // 1. 在实例生成之前自动执行
        beforeCreate() {
            console.log("======beforeCreate======");
        },

        // 2. 在实例生成之后自动执行
        created() {
            console.log("======created======");
        },

        // 3. 在组件内容被渲染到页面之前调用
        beforeMount(){
            console.log("------------beforeMount------------");
            console.log("获取内容：", document.getElementById("app").innerHTML);
            console.log("------------beforeMount------------");
            
        },
        

        // 4. 在组件内容被渲染到页面之后调用
        mounted(){
            console.log("------------mountd------------");
            console.log("获取内容：", document.getElementById("app").innerHTML);
            console.log("------------mountd------------");
        },

        // 5. 当数据发生变化
        beforeUpdate() {
            // 在控制台中修改 msg 的内容时，会触发
            // 如果是要测试数据变更写法如下： Vue.createApp({}).mount(); 不能写成 app.mount();
            console.log("------------beforeUpdate------------");
            console.log("获取内容：", document.getElementById("app").innerHTML);
            console.log("------------beforeUpdate------------");
        },

        // 6. 数据变更完成
        updated(){
            console.log("------------updated------------");
            console.log("获取内容：", document.getElementById("app").innerHTML);
            console.log("------------updated------------");
        },

        // 7. 当 vue 实例失效时，自动执行函数
        beforeUnmount(){
            console.log("beforeUnMount");
        },

        // 8. 当 vue 实例失效时， dom 完全销毁，自动执行
        unmounted(){
            console.log("unMounted");
        },

        // 9. 全局的错误捕获
        onErrorCaptured(err, instance, info){
            console.log(err, instance, info);
        },

        template: `<h1>{{msg}}</h1>`,
    });
    
    vueApp.mount("#app");

    // 延迟销毁，测试销毁函数
    setTimeout( () => {
        vueApp.unmount("#app");
    }, 2000);
</script>
</html>
